<template>
	<view>
		<uni-nav-bar title="爬塔" color="#fff" backgroundColor="transparent" :border="false" :statusBar="true" :fixed="true"
			@clickLeft="$c.back()">
			<view class="uni-nav-bar-l-icon" slot="left">
				<view class="uni-nav-bar-l-icon-left icon">
					<image :src="$img('/static/img2/cc20.png')" lazy-load></image>
				</view>
			</view>
		</uni-nav-bar>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="loadData" :down="downOption"
			:up="upOption">
			<view class="list ml30 mr30 f-c j-s f-w">
				<view class="item mb30" v-for="(item,index) in list" :key="index"
					:style="{background:`url(${$img('/static/img3/climb_20241129_1.png')}) no-repeat 0 0 / 100% 100%`}"
					@click="go(`/package/index/climb?id=${item.id}`)">
					<image :src="item.imgurl" class="item-img"></image>
					<view class="item-title mt8 omit2">{{item.title}}</view>
					<!-- <view class="item-price mt10">¥9.90</view> -->
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	export default {
		data() {
			return { // 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					auto: true
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					auto: true,
					page: {
						size: 15 // 每页数据的数量,默认10
					}
				},
				list: []
			}
		},
		methods: {
			loadData(page) {
				this.req({
					url: 'climb_list',
					data: {
						page: page.num,
						size: page.size
					},
					success: res => {
						if (page.num == 1) this.list = []
						this.list.push(...res.data.climb_list.list)
						this.mescroll.endBySize(res.data.climb_list.list.length, res.data.climb_list.count)
					}
				})
				this.mescroll.endByPage(1, 1)
			},
			go(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.item {
		width: 330rpx;
		height: 438rpx;
		padding: 8rpx;
		box-sizing: border-box;

		.item-img {
			width: 314rpx;
			height: 314rpx;
			border-radius: 12rpx;
		}

		.item-title {
			font-size: 28rpx;
			color: #FFFFFF;
		}

		.item-price {
			font-size: 28rpx;
			color: #E40D1D;
		}
	}
</style>